<template>
  <view class="detail">
    <view class="content">
      <xbd-color-title :image="require('@/static/image/notice/icon.svg')">
        <template #grade>
          <text>重大事项决策风险预警通知</text>
        </template>
        <template #content>
          <xbd-row :title="'风险等级'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text :style="{ color: gradeColor('中') }">中</text>
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'预警对象'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <view class="tag">
                  <text class="name">小张张</text>
                  <!-- <text class="status">已收到</text> -->
                </view>
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'预警事项'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text>重大事项决策风险预警通知</text>
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'预警意见'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text
                  >应积极落实公司重大事件决策流程制度，保证决策全流程规范、有序、透明。</text
                >
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'防控措施'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text>会议记录必须经每位参会人员签字确认。</text>
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'预警时间'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text>2022-04-05 22:00</text>
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'提交人'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text>小张张</text>
              </view>
            </template>
          </xbd-row>
          <xbd-row :title="'提交时间'" :color="'#A0A7B8'">
            <template>
              <view class="row">
                <text>2022-04-05 22:00</text>
              </view>
            </template>
          </xbd-row>
        </template>
      </xbd-color-title>
      <view class="temp">
        <text>模板</text>
      </view>
    </view>
    <view class="bottom">
      <xbd-row :title="'审核人'" :color="'#A0A7B8'">
        <template>
          <view class="row">
            <text>王珂行</text>
            <!-- <image src="@/static/image/notice/record/adopt.svg" /> -->
            <!-- <image
            v-if="item.status === 'refuse'"
            src="@/static/image/notice/record/refuse.svg"
          />
          <image
            v-if="item.status === 'approval'"
            src="@/static/image/notice/record/approval.svg"
          /> -->
          </view>
        </template>
      </xbd-row>
      <xbd-row :title="'审核意见'" :color="'#A0A7B8'">
        <template>
          <view class="text">
            <textarea
              :value="opinion"
              placeholder="请输入"
              maxlength="-1"
              @input="iptMatter"
            />
            <view class="tips">
              <text> 注：1.当风险预警通知模板首次审核通过，系统根据预设的</text>
              <text>预警时间每年自动向预警对象发送页面内的预警内容，再次</text>
              <text>发送不需要经过审核。</text>
              <text>2.如需更改预警对象、风险等级、预警内容、预警时间信息</text>
              <text>，需要重新进行审核。</text>
            </view>
          </view>
        </template>
      </xbd-row>
    </view>
    <view class="end">
      <view class="moduleBtn">拒绝</view>
      <view class="warnBtn">通过</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "detail",
  data() {
    return {
      opinion: "",
    };
  },
  methods: {
    gradeColor(val) {
      let res = "";
      switch (val) {
        case "低":
          res = "#2E73FC";
          break;
        case "中":
          res = "orange";
          break;
        case "高":
          res = "red";
          break;
      }
      return res;
    },
    iptMatter(e) {
      let { value } = e.detail;
      this.opinion = value;
      console.log(this.opinion);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/common.scss";
.detail {
  @include compress;
  .content {
    background-color: #fff;
    @include compress;
    border-radius: 12rpx;
    margin-bottom: 30rpx;
    position: relative;
    .row {
      //   height: 32rpx;
      margin: 20rpx 0 10rpx 0;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag {
        width: 33.3%;
        margin-bottom: 20rpx;
        .name {
        }
        .status {
          // width: 104rpx;
          height: 32rpx;
          text-align: center;
          line-height: 32rpx;
          font-size: 22rpx;
          color: #8890a5 !important;
          background-color: #ebeef5;
          padding: 3rpx 6rpx;
          border-radius: 4rpx;
          margin: 0 0 0 20rpx;
        }
      }
    }
    .temp {
      width: 92rpx;
      height: 44rpx;
      background-color: #2a84e0;
      color: #fff;
      font-size: 26rpx;
      text-indent: 25rpx;
      line-height: 44rpx;
      border-radius: 0 12rpx 12rpx 40rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
  .bottom {
    background-color: #fff;
    @include compress;
    border-radius: 12rpx;
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      image {
        width: 100rpx;
        height: 100rpx;
      }
    }
    .text {
      width: 100%;
      padding: 20rpx 0 0 0;
      box-sizing: border-box;
      textarea {
        width: 100%;
        height: 160rpx;
        border: 1rpx solid #ebeef5;
        padding: 0;
        margin: 0;
        padding: 20rpx;
        box-sizing: border-box;
        color: #a0a7b8;
      }
      .tips {
        color: #a0a7b8;
        font-size: 24rpx;
        margin-top: 20rpx;
        text {
          display: block;
          margin-top: 10rpx;
        }
      }
    }
    & .row:first-child {
      margin: 0;
    }
  }
  .end {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    view {
      width: 316rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      font-size: 32rpx;
      border-radius: 12rpx;
    }
    .moduleBtn {
      border: 1rpx solid #2a84e0;
      color: #2a84e0;
    }
    .warnBtn {
      background-color: #2a84e0;
      color: #fff;
    }
  }
}
</style>